<template>
  <div id="todo-container">
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :mask="false"
      :closable="false"
      :footer="null"
      :zIndex="4000"
      :getContainer="getContainer"
      @cancel="closeModal()"
      transitionName="fade"
    >
      <slot> </slot>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //关闭页面
    closeModal() {
      this.$emit("update:visible", false);
    },
    getContainer() {
      return document.getElementById("todo-container");
    },
  },
};
</script>

<style lang="less" scoped>
#todo-container {
  /deep/.ant-modal-root {
    .ant-modal-wrap {
      position: fixed;
      top: 64px;
      left: 0px;
      bottom: 0;
      right: 0;
      .ant-modal {
        width: (100vw - 0px) !important;
        top: 0;
        padding-bottom: 0;
        margin: 0;
        .ant-modal-content {
          background-color: #f3f4f6;
          box-shadow: none;
          .ant-modal-body {
            padding: 0;
            height: calc(100vh - 64px) !important;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
